<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	request.setCharacterEncoding("UTF-8"); 
	session.invalidate();	// 清除session	
%>   
        
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>管理</title>
    <style type="text/css">
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
    </style>
    <style type="text/css">
    #container {
        width: 590px;
        margin: 50px auto;
        overflow: hidden;
        background: #ededed;
    }
    #head {
        background: url("images/login-bg_1.png") no-repeat;
        width: 590px;
        height: 127px;
        margin: auto;
        overflow: hidden;
    }
    #form {
        width: 240px;
        padding: 25px 80px;
        margin: 65px 95px 65px 95px;
        background: #fff;
        -moz-box-shadow: 0 5px 10px #bbb;
        -webkit-box-shadow: 0 5px 10px #bbb;
        box-shadow: 0 5px 10px #bbb;
    }
    .row {
        height: 50px;
        line-height: 50px;
    }
    .row img {
        float: left;
    }
    form {
        width: 100%;
        overflow: hidden;
    }
    .row span {
        float: left;
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
        color: #000;
        font-size: 18px;
    }
    .row {
        margin-bottom: 18px;
    }
    #name {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border: 1px solid #bbb;
        width: 188px;
    }
    #password {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border: 1px solid #bbb;
        width: 188px;
    }
    #name {
        background: url("images/login-icon_2.png") no-repeat;
        background-position: 13px 14px;
        padding-left: 46px;
    }
    #password {
        background: url("images/login-icon_3.png") no-repeat;
        background-position: 13px 14px;
        padding-left: 46px;
    }
    label {
        color: #999;
        font-size: 14px;
    }
    #submit {
        width: 140px;
        height: 45px;
        line-height: 45px;
        -moz-box-shadow: 5px;
        -webkit-box-shadow: 5px;
        box-shadow: 5px;
        border: none;
        text-align: center;
        font-size: 16px;
        color: #fff;
        margin: auto;
    }
    .notlogin {
        background: #009fe9;
    }
    .text-center {
        text-align: center;
    }
    .notlogin:hover {
        cursor: pointer;
    }
    .text-error {
        color: red;
    }
    #error_info {
        display:none;
    }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    var is_logining = false;
    $(document).ready(function() {
        $('#name').focus(function() {
            if ($(this).val() == '用户名') {
                $(this).val('');
            }
        });
        $('#name').blur(function() {
            if ($.trim($(this).val()) == '') {
                $(this).val('用户名');
            }
        });

        $('#password').focus(function() {
            if ($(this).val() == '密码') {
                $(this).val('');
            }
        });
        $('#password').blur(function() {
            if ($.trim($(this).val()) == '') {
                $(this).val('密码');
            }
        });
        $('#submit').click(function() {
            if (!is_logining) {
                is_logining = true;
                $(this).removeClass('notlogin');
                var name = $('#name').val();
                var password = $('#password').val();
                if (name == '用户名' || password == '密码' || $.trim(name) == '' || $.trim(password) == '') {
                    tool.showErrorInfo('请输入完整');
                } else {
                    tool.hideErrorInfo();
                }
                $(this).addClass('notlogin');
                is_logining = false;
            }
        });
    });

    var tool = {
        showErrorInfo: function(str) {
            $('#error_info').html(str).show();
        },
        hideErrorInfo: function() {
            $('#error_info').hide();
        }
    };

    function showErrorInfo(str) {

    }
    </script>
</head>
<body>
    <div id="container">
        <div id="head">
        </div>
        <div id="form">
            <form action="admin.jsp" method="post">
                <div class="row">
                    <img src="images/login-icon_1.png" width="38" height="38" />
                    <span>管理登陆</span>
                </div>
                <div class="row">
                    <input type="text" id="name" name="name" value="用户名" />
                </div>
                <div class="row">
                    <input type="password" id="password" name="password" value="密码" />
                </div>
                <!--
                <div class="row">
                    <input type="checkbox" name="remember" id="remember" />
                    <label for="remember">记住密码</label>
                </div>
                -->
                <div id="error_info" class="row text-error text-center">登录失败
                </div>
                <div class="row text-center">
                    <input type="submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;陆" name="submit" id="submit" class="notlogin" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>